<template>
  <div>
    <v-form
      :options="options"
      label-width="auto"
      
    >
      <template #uploadArea>
        <el-button type="primary">Click to upload</el-button>
      </template>
      <template #uploadTip>
        <div style="color: #ccc; font-size: 12px;">
          jqp/png files with a size less than 500kb
        </div>
      </template>
      <template #action="scope">
        <el-button type="primary" @click="submitForm(scope)">提交</el-button>
        <el-button @click="resetForm(scope)">重置</el-button>
      </template>
    </v-form>
  </div>
</template>

<script setup lang='ts'>

import VForm from '@/components/form/src/index.vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus/lib'
import type { FormOptions } from '@/components/form/src/types';

defineOptions({
  name: 'FormView'
})

interface Scope {
  formRef: FormInstance;
  model: any;
}

const options: FormOptions[] = [
  {
    type: 'input',
    value: '',
    label: '用户名',
    prop: 'username',
    rules: [
      {
        required: true,
        message: '用户名不能为空',
        trigger: 'blur'
      },
      {
        min: 2,
        max: 6,
        message: '用户名在2-6位之间',
        trigger: 'blur'
      }
    ]
  },
  {
    type: 'input',
    value: '',
    label: '密码',
    prop: 'password',
    rules: [
      {
        required: true,
        message: '密码不能为空',
        trigger: 'blur'
      },
      {
        min: 6,
        max: 15,
        message: '密码在6-15位之间',
        trigger: 'blur'
      }
    ],
    attrs: {
      showPassword: true
    }
  },
  {
    type: 'select',
    value: '',
    label: '职位',
    placeholder: '请选择职位',
    prop: 'role',
    rules: [
      {
        required: true,
        message: '职位不能为空',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'option',
        label: '经理',
        value: '1',
      },
      {
        type: 'option',
        label: '主管',
        value: '2',
      },
      {
        type: 'option',
        label: '员工',
        value: '3',
      },
    ],
    attrs: {
      style: {width: '200px'}
    }
  },
  {
    type: 'checkbox-group',
    value: [],
    prop: 'like',
    label: '爱好',
    children: [
      {
        type: 'checkbox',
        label: '足球',
        value: '1',
      },
      {
        type: 'checkbox',
        label: '篮球',
        value: '2',
      },
      {
        type: 'checkbox',
        label: '排球',
        value: '3',
      },
    ]
  },
  {
    type: 'upload',
    label: '文件上传',
    prop: 'pic',
    uploadAttrs: {
      action: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15'
    },
    // rules: [
    //   {
    //     required: true,
    //     message: '',
    //     trigger: 'blur',
    //   }
    // ]
  }
]

const submitForm = (scope: Scope) => {
  scope.formRef.validate((valid) => {
    if(valid){

    } else {
      ElMessage.error('校验失败')
    }
  })
}
const resetForm = (scope: Scope) => {
  scope.formRef.resetFields()
}
</script>
